import React, { Component } from 'react'

export default class Message extends Component {
  //状态属性
  state = {
    v: '', //input 元素值的状态
    msgs: ['a','b','c'] //所有信息的状态
  }

  //按钮的单击事件处理程序
  send = () => {
    //获取 v 的状态值
    let {v, msgs} = this.state;
    //判断
    if(v === '') return;
    //状态的修改
    this.setState({
      msgs: [...msgs, v],
      // v: ''
    })
  }

  //渲染方法
  render() {
    //解构赋值
    let {v, msgs} = this.state;
    return (
      <div>
        <input type="text" value={v} onChange={(e) => {this.setState({v: e.target.value})}} /> 
        <button onClick={this.send}>发送</button>
        <hr />
        <div ref={el => this.div = el} style={{width: 400, height: 300, border: 'solid 1px #521', overflowY: 'scroll'}}>
          <ul>
            {
              msgs.map((item, index) => {
                return <li key={index}>{item}</li>
              })
            }
          </ul>
        </div>
      </div>
    )
  }

  //componentDidUpdate 组件更新完毕的生命周期方法
  componentDidUpdate(){
    // console.log('我已经更新完成啦', this);
    //更新 div 框的滚动高度
    // this.div.scrollTop = 200000;
    this.div.scrollTop = this.div.scrollHeight;

  }
}
